<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :width="width" class="custom-dialog" @close="handleClose"
    align-center>
    <template #header>
      <div class="dialog-header">
        <slot name="header">{{ title }}</slot>
      </div>
    </template>
    <div class="dialog-content">
      <slot name="content"></slot>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <slot name="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button v-show="!isView" type="primary" @click="handleSubmit">确定</el-button>
        </slot>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface DialogProps {
  title: string;
  isView: boolean;
  width: string; // 新增 width 属性
  onSubmit?: () => void;
  onClose?: () => void;
}

const dialogVisible = ref(false);
const props = defineProps<DialogProps>();

const acceptParams = (visible: boolean) => {
  dialogVisible.value = visible;
};

const handleSubmit = () => {
  if (props.onSubmit) {
    props.onSubmit();
  }
};

const handleClose = () => {
  if (props.onClose) {
    props.onClose();
  }
  dialogVisible.value = false;
};

defineExpose({
  acceptParams
});
</script>

<style scoped>
.custom-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dialog-header {
  flex-shrink: 0;
}

.dialog-content {
  flex: 1;
  overflow-y: auto;
  max-height: 500px;
  /* padding: 20px; */
}

.dialog-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  justify-content: center;
}
</style>
